import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

const home = {template: '<div>home内容</div>'}
const first = {template: '<div>first内容</div>'}
const second = {template: '<div>second内容</div>'}

const hehe = {template: '<div>hehe内容</div>'}

// const firstFirst = {template: '<div>{{ $route.name }} firstFirst内容{{ $route.params.id }}</div>'}
// const firstSecond = {template: '<div>firstSecond内容</div>'}

// const first1 = {
//     template: `
//         <div class="asdf">
//             <h2>组件</h2>
//             <router-view></router-view>
//         </div>
//     `
// }

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        {
            path: '/', components: {
            default: home,
            left: first,
            right: second
        }
        },
        {
            path: '/first', components: {
            default: hehe,
            left: first,
            right: second
        }
        },
        // {path: '/', name: 'home', component: home},
        // {
        //     path: '/first', component: first1,
        //     children: [
        //         {path: '/', name: 'home-first', component: first},
        //         {path: 'first', name: 'home-first-first', component: firstFirst},
        //         {path: 'second', name: 'home-first-second', component: firstSecond},
        //     ]
        // },
        // {path: '/second', name: 'home-second', component: second},
    ]
});

new Vue({
    template: `
        <div id="r">
            <h1>导航</h1>
            <p>{{ $route.name }}</p>
            <ol>
                <li><router-link to="/">/</router-link></li>
                <li><router-link to="/first">first</router-link></li>
                
                <!--<li><router-link to="/first">first</router-link></li>-->
                    <!--<ol>-->
                        <!--<li><router-link :to="{name:'home-first-first',params:{id:123}}">first</router-link></li>-->
                        <!--<li><router-link to="/first/second">second</router-link></li>                -->
                    <!--</ol>-->
                <!--<li><router-link to="/second">second</router-link></li>-->
            </ol>
            <router-view class="" ></router-view>
            <router-view class="" name="left" style="float:left;width:50%;background-color:#ff6600;height:300px;"></router-view>
            <router-view class="" name="right" style="float:left;width:50%;background-color:#fff600;height:300px;"></router-view>
        </div>
    `,
    router
}).$mount('#app');